//1.登录注册页面的切换
//1.1去注册账号 - 按钮 - 点击事件 显示注册页面
$("#goto-register").on("click", function () {  
    $("#register").stop().show();
})
//1.2 已有账号 -按钮 -点击事件 隐藏注册页面
$("#goto-login").on("click",function () {
    $("#register").stop().hide();
})

//2.注册页面功能编写
//2.1 给表单绑定 -提交事件 (因为这个是form标签,点击button默认有提交的动作,所以我们要阻止提交事件,换成自己用Ajax来提交数据)
$("#register .layui-form").submit(function (e) { 
    e.preventDefault(); //清除fo标签默认提交动作
    //收集表单里的参数数据
    //1.收集form标签内所有的表单的name属性值,和value属性值,形成key=value&key=value的字符串
    //2.mame的属性值尽量直接写给后台接口的指定参数名
    //$(this).serialize()

//密码需要加密,所以自己组织账号密码的-- 发给后台的参数对象 
var data = {
    password:md5($("#register input[name=password]").val()),//密码用md5加密
    username: $("#register input[name=username]").val()
}
var arr = [];
for (var prop in data) {
    arr.push(`${prop}=${data[prop]}`);
}
    var argStr = arr.join("&");// username=xxxxx&password=ksdfadsfsdaaf123123123
    //因为后台POST接口,后台要的内容类型是application/x-ww-form-urlencoded格式 (key=value&value字符串)
    console.log(argStr);
    registerAPI(argStr,function (res) { 
        console.log(res);
     });
});
//3.登录功能的编写
$("#login .layui-form").submit(function (e) { 
    e.preventDefault();
    var data = {
        password:md5($("#login input[name=password]").val()),
        username: $("#login input[name=username]").val()
    }
    var arr = [];
    for (var prop in data) {
        arr.push(`${prop}=${data[prop]}`);
    }
    var argStr = arr.join("&");
    loginAPI(argStr, function (res) { 
         // 保存登录后 - 后台返回的token字符串 - 在sessionStorage中 (因为api.js/所有接口都要用到这个token, 跨页面传值过去)
        sessionStorage.setItem("token", res.data.token);
        // 跳转到首页
        window.location.href="index.html"
     });
});
// 密码的原理:(业务流程)
// 前台无论登录和注册, 都要把密码加密后, 再传给后台
// 后台数据库里保存的都是加密后的字符串
// 登录: 加密后, 和后台保存的进行相等比较 相同, 证明密码匹配正确
// 因为md5是无法解密的, 所以找回密码的时候, 不会告诉你原始密码, 而是让你覆盖